<!--
 * @Author: 赵克强 huohuo625@163.com
 * @Date: 2024-08-30 10:40:03
 * @LastEditors: 赵克强 huohuo625@163.com
 * @LastEditTime: 2024-09-09 15:53:23
 * @FilePath: \hy-ui\src\views\fileView\index.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <div class="fileView">
    <div class="title">
      <span>文件预览</span>
      <el-button type="primary" @click="handleDown" size="mini">下载</el-button>
    </div>
    <el-divider></el-divider>
    <div class="fileMain" v-if="row.url">
      <div
        style="
          margin-bottom: 12px;
          font-size: 14px;
          color: #333;
          font-weight: bold;
        "
      >
        {{ row.name }}
      </div>
    <div style=" display: flex;justify-content: center;width:100%;height:100%">
         <img  :src="row.url" alt="" style="max-width:100%;max-height:100%"/>
      <VueOfficeDocx
        :src="row.url"
        style="width: 100%"
        v-if="row.type === 'word'"
      />
      <VueOfficePdf
        :src="row.url"
        style="width: 100%"
        v-if="row.type === 'pdf'"
      />
      <VueOfficeExcel
        :src="row.url"
        style="width: 100%; height: 80vh"
        v-if="row.type === 'excel'"
      />
    </div>
    </div>
  </div>
</template>

<script>
import VueOfficeDocx from "@vue-office/docx";
import VueOfficePdf from "@vue-office/pdf";
import VueOfficeExcel from "@vue-office/excel";
import "@vue-office/docx/lib/index.css";
import "@vue-office/excel/lib/index.css";

export default {
  name: "fileView",
  components: {
    VueOfficeDocx,
    VueOfficePdf,
    VueOfficeExcel,
  },
  data() {
    return {
      row: {},
    };
  },
  methods: {
    handleDown() {
      const a = document.createElement("a");
      a.href = this.row.url;
      a.download = this.row.name;
      document.body.appendChild(a);
      a.click();
      document.body.removeChild(a);
    },
  },
  mounted() {
    this.row = this.$route.query;
    if (this.$route.query.type === "no") {
      this.$message.error("无法获取文件类型，请下载后查看！");
    }
  },
};
</script>

<style lang="scss" scoped>
.fileView {
  padding: 20px;
  .title {
    display: flex;
    justify-content: space-between;
  }
  ::v-deep .el-divider {
    margin: 12px 0;
  }
  .imgCnt {
    background-size: cover;
  }
}
</style>